<template>
  <div class="profile">
    
    <div class="userbg"  v-if="user">
      <div class="user_image">
        <img src="~assets/img/profile/avatar.svg">
      </div>
      <div class="reg_center" >
        <p> 昵称：{{user.nickName}} </p>
        <p>登录名：{{ user.loginName }}</p>
        <p>个性签名：{{user.introduceSign}}</p>
      </div>
    </div>
    <!-- <router-link class="userbg" to="/login" v-else>
      <div class="user_image">
        <img src="~assets/img/profile/avatar.svg">
      </div>
      <div class="reg_center" >
        <h3> 登录/注册</h3>
        <span>登录后享受更多权益</span>
      </div>
       
      <div class="arrow_left"><img src="~assets/img/common/arrow-left.svg" alt=""></div>
    </router-link> -->
    <div class="userinfo">
      <div class="follow" @click="goTo('order')">
        <!-- <div class="number">0</div> -->
        <div class="store">我的订单</div>
      </div>
      <div class="footprint" @click="goTo('account')">
        <!-- <div class="number">0</div> -->
        <div class="print">账号管理</div>
      </div>
      <div class="money">
        <!-- <div class="number">9</div> -->
        <div class="envelopes" @click="goTo('address')">地址管理</div>
      </div>
    </div>
    <div class="usercontent">
        <div class="userlist">
          <img src="~assets/img/profile/message.svg" alt="">
          <span>我的消息</span>
        </div>
        <div class="userlist">
          <img src="~assets/img/profile/pointer.svg" alt="">
          <span>积分商城</span>
        </div>
        <div class="userlist">
          <img src="~assets/img/profile/vip.svg" alt="">
          <span>会员卡</span>
        </div>
        <div class="userlist" @click="goTo('cart')">
          <img src="~assets/img/profile/cart.svg" alt="">
          <span>我的购物车</span>
        </div>
        <div class="userlist">
          <img src="~assets/img/profile/shopping.svg" alt="">
          <span>购物APP</span>
        </div>
    </div>
  </div>
</template>

<script>
import {getUserInfo } from 'network/user'
export default {
    name:'Profile',
    data() {
      return {
        user:{}
      }
    },
    components:{
        
    },
    // created(){
    //   // 获取本地存储的数据
    //   const users = JSON.parse(localStorage.getItem('userInfo'))
    //   this.user = users
    // }, 
    async mounted() {
      const {data} = await getUserInfo()
      this.user = data
    },
    computed: {
     
    },
    methods: {
      goTo(path) {
        this.$router.push({ path:path })
      }
    }
}

</script>
<style scoped>
.profile{
  width: 100vw;
}
.userbg{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  padding:20px 10px;
  background:var(--color-tint);
  color:#fff;
}
    
.user_image{
  width: 70px;
}
      
.user_image img{
  width: 100%;
}
.reg_center{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 14px;
}       

.arrow_left{
  width: 30px;
}
.arrow_left img{
  width: 100%;
}       
.userinfo{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  font-size: 18px;
  margin: 10px 0;
}   
.userinfo>div{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
}
.userinfo .footprint{
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}    
.usercontent{
  font-size: 14px;
  border-top:10px solid #eee ;
}  
.userlist{
  line-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #eee;
} 
.userlist img{
  margin: 0 10px;
  width: 20px;

}
.userlist span{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
</style>